<template>
  <div class="tool-borrow-page">
    <!-- 页面头部 -->
    <el-card shadow="hover" class="breadcrumb-card">
      <div class="breadcrumb-content">
        <div class="breadcrumb-title">
          <div class="icon-wrapper">
            <el-icon class="breadcrumb-icon">
              <Collection />
            </el-icon>
          </div>
          <div class="title-content">
            <p class="breadcrumb-subtitle">工具管理 · 工具领用</p>
            <h2 class="breadcrumb-heading">工具领用记录</h2>
          </div>
        </div>
        <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb-nav">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>工具管理</el-breadcrumb-item>
          <el-breadcrumb-item>工具领用</el-breadcrumb-item>
          <el-breadcrumb-item>工具领用列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-card>

    <!-- 搜索区域 -->
    <el-card shadow="hover" class="search-card">
      <template #header>
        <div class="search-header">
          <span class="search-title">
            <el-icon class="search-icon"><Search /></el-icon>
            筛选查询
          </span>
        </div>
      </template>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="关键词" class="form-item-custom">
          <el-input
            v-model="searchForm.keyword"
            placeholder="请输入领用编号/名称"
            clearable
            class="search-input"
          >
            <template #prefix>
              <el-icon class="input-icon"><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="领用人" class="form-item-custom">
          <el-select
            v-model="searchForm.borrowerId"
            placeholder="请选择领用人"
            clearable
            filterable
            class="search-select"
          >
            <el-option
              v-for="item in borrowerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="领用时间" class="form-item-custom">
          <el-date-picker
            v-model="searchForm.borrowTime"
            type="date"
            placeholder="请选择领用时间"
            value-format="YYYY-MM-DD"
            class="search-date"
            clearable
          />
        </el-form-item>
        <el-form-item class="search-actions">
          <el-button class="reset-btn" @click="handleReset" :icon="Refresh">
            重置
          </el-button>
          <el-button
            type="primary"
            :loading="loading"
            @click="handleSearch"
            class="search-btn"
            :icon="Search"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card shadow="hover" class="table-card">
      <template #header>
        <div class="table-header">
          <div class="table-title">
            <span class="title-text">工具领用列表</span>
            <el-tag size="small" type="info" effect="plain" class="list-tag">
              <el-icon><List /></el-icon>
              列表视图
            </el-tag>
            <el-tag
              v-if="pagination.totalCount > 0"
              size="small"
              type="success"
              effect="plain"
              class="count-tag"
            >
              共 {{ pagination.totalCount }} 条记录
            </el-tag>
          </div>
          <div class="table-operations">
            <el-button
              type="primary"
              size="default"
              @click="handleCreate"
              class="action-btn create-btn"
            >
              <el-icon><Plus /></el-icon>
              新增
            </el-button>
            <el-button
              type="danger"
              size="default"
              :disabled="!multipleSelection.length"
              @click="handleBatchDelete"
              class="action-btn delete-btn"
            >
              <el-icon><Delete /></el-icon>
              批量删除
              <el-badge
                v-if="multipleSelection.length > 0"
                :value="multipleSelection.length"
                class="badge-custom"
              />
            </el-button>
          </div>
        </div>
      </template>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        class="data-table"
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="80" align="center">
          <template #default="{ $index }">
            <span class="index-text">{{
              (pagination.Pageindex - 1) * pagination.PageSize + $index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="borrowNo" label="领用编号" min-width="180">
          <template #default="{ row }">
            <el-link
              type="primary"
              @click="handleViewDetail(row)"
              class="link-text"
              :underline="false"
            >
              <el-icon class="link-icon"><Document /></el-icon>
              {{ row.borrowNo }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="borrowName"
          label="领用名称"
          min-width="180"
          show-overflow-tooltip
        />
        <el-table-column
          prop="borrowTypeName"
          label="领用类型"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="borrowTime"
          label="领用时间"
          min-width="180"
          align="center"
        >
          <template #default="scope">
            <span class="time-text">{{
              formatDate(scope.row.borrowTime)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="borrowerName" label="领用人" min-width="120" />
        <el-table-column
          prop="borrowDeptName"
          label="领用部门"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          prop="remark"
          label="备注"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button
                type="primary"
                link
                size="small"
                @click="handleEdit(row)"
                class="action-link-btn edit-btn"
              >
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-button
                type="danger"
                link
                size="small"
                @click="handleDelete(row)"
                class="action-link-btn delete-link-btn"
              >
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="table-pagination">
        <div class="pagination-content">
          <div class="pagination-info">
            <span class="pagination-total">
              共 <strong>{{ pagination.totalCount }}</strong> 条记录
            </span>
            <span class="pagination-detail">
              第 {{ pagination.Pageindex }} / {{ totalPages }} 页
            </span>
          </div>
          <el-pagination
            v-model:current-page="pagination.Pageindex"
            v-model:page-size="pagination.PageSize"
            :page-sizes="[10, 20, 50, 100]"
            background
            layout="prev, pager, next"
            :total="pagination.totalCount"
            class="pagination-component"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div class="pagination-controls">
            <div class="pagination-size">
              <span class="size-label">每页</span>
              <el-select
                v-model="pagination.PageSize"
                size="small"
                class="size-select"
                @change="handleSizeChange"
              >
                <el-option label="10 条" :value="10" />
                <el-option label="20 条" :value="20" />
                <el-option label="50 条" :value="50" />
                <el-option label="100 条" :value="100" />
              </el-select>
            </div>
            <div class="pagination-jumper">
              <span class="jumper-label">跳至</span>
              <el-input-number
                v-model="jumpPage"
                :min="1"
                :max="totalPages"
                size="small"
                class="jumper-input"
                controls-position="right"
              />
              <span class="jumper-label">页</span>
              <el-button size="small" @click="handleJumpPage" class="jumper-btn"
                >确定</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from "vue";
import axios from "axios";
import http from "@/Http/http";
import {
  ArrowRight,
  Collection,
  Search,
  Refresh,
  Plus,
  Delete,
  Edit,
  Document,
  List,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import https from "@/Http/http";

interface ToolBorrowRow {
  id: number;
  borrowNo: string;
  borrowName: string;
  borrowTypeName: string;
  borrowTime: string;
  borrowerName: string;
  borrowDeptName: string;
  detailCount: number;
  state: number;
  remark: string;
}

const tableData = ref<ToolBorrowRow[]>([]);
const loading = ref(false);
const multipleSelection = ref<ToolBorrowRow[]>([]);
const router = useRouter();

const pagination = reactive({
  Pageindex: 1,
  PageSize: 10,
  totalCount: 0,
});

const searchForm = reactive({
  keyword: "",
  borrowerId: "",
  borrowTime: "" as string | null,
});

const jumpPage = ref(1);

const borrowerOptions = ref<{ label: string; value: number }[]>([]);

const fetchList = async () => {
  loading.value = true;
  try {
    const params: any = {
      Pageindex: pagination.Pageindex,
      PageSize: pagination.PageSize,
    };

    // 如果有关键字，优先使用关键字查询（编号或名称模糊匹配）
    if (searchForm.keyword && searchForm.keyword.trim()) {
      params.Keyword = searchForm.keyword.trim();
    }

    // 领用人查询
    if (searchForm.borrowerId) {
      params.BorrowerId = Number(searchForm.borrowerId);
    }

    // 领用时间查询
    if (searchForm.borrowTime) {
      params.BorrowTime = searchForm.borrowTime;
    }

    const response = await https.Reads.get("/Applicae/Toolborrowheaderlist", {
      params,
    });

    const data = response.data;

    if (data && data.code === 1) {
      tableData.value = data.data ?? [];
      pagination.totalCount = data.totalCount ?? 0;
      jumpPage.value = pagination.Pageindex;
    } else {
      ElMessage.error(data?.msg || "获取工具领用列表失败，请稍后重试");
      tableData.value = [];
      pagination.totalCount = 0;
    }
  } catch (error: any) {
    console.error("查询工具领用列表失败:", error);
    const errorMsg =
      error?.response?.data?.msg ||
      error?.message ||
      "获取工具领用列表失败，请稍后重试";
    ElMessage.error(errorMsg);
    tableData.value = [];
    pagination.totalCount = 0;
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  pagination.Pageindex = 1;
  fetchList();
};

const handleReset = () => {
  searchForm.keyword = "";
  searchForm.borrowerId = "";
  searchForm.borrowTime = null;
  handleSearch();
};

const handleSizeChange = (val: number) => {
  pagination.PageSize = val;
  pagination.Pageindex = 1;
  jumpPage.value = 1;
  fetchList();
};

const handleCurrentChange = (val: number) => {
  pagination.Pageindex = val;
  jumpPage.value = val;
  fetchList();
};

const totalPages = computed(() =>
  Math.max(1, Math.ceil(pagination.totalCount / pagination.PageSize))
);

const handleJumpPage = () => {
  if (jumpPage.value >= 1 && jumpPage.value <= totalPages.value) {
    pagination.Pageindex = jumpPage.value;
    fetchList();
  } else {
    ElMessage.warning(`请输入1-${totalPages.value}之间的页码`);
  }
};

const handleSelectionChange = (rows: ToolBorrowRow[]) => {
  multipleSelection.value = rows;
};

const handleCreate = () => {
  router.push("/ToolborrowheaderAdd");
};

const handleBatchDelete = async () => {
  if (!multipleSelection.value.length) {
    ElMessage.warning("请先选择需要删除的记录");
    return;
  }
  try {
    await ElMessageBox.confirm("确定批量删除选中的记录吗？", "提示", {
      type: "warning",
    });
    const ids = multipleSelection.value.map((r) => r.id);
    const res = await https.Writes.delete(
      "/Appliance/ToolborrowdetailDeletes",
      { data: { Ids: ids } }
    );
    if (res.data && res.data.code === 1) {
      ElMessage.success("批量删除成功");
    } else {
      ElMessage.success("已提交批量删除");
    }
    fetchList();
  } catch (e) {
    // 用户取消或请求失败
  }
};

const handleViewDetail = (row: ToolBorrowRow) => {
  router.push({
    path: "/ToolborrowheaderDetail",
    query: { id: row.id },
  });
};

const handleEdit = (row: ToolBorrowRow) => {
  const query: any = {
    id: row.id,
    borrowNo: (row as any).borrowNo,
    borrowName: (row as any).borrowName,
    borrowerId: (row as any).borrowerId,
    borrowDept: (row as any).borrowDept,
    borrowTypeId: (row as any).borrowTypeField,
    borrowTime: (row as any).borrowTime,
  };
  router.push({ path: "/ToolborrowheaderAdd", query });
};

const handleDelete = async (row: ToolBorrowRow) => {
  try {
    await ElMessageBox.confirm("确定删除该记录吗？", "提示", {
      type: "warning",
    });
    const res = await https.Writes.put("/Appliance/ToolborrowdetailDelete", {
      id: row.id,
    });
    if (res.data && res.data.code === 1) {
      ElMessage.success("删除成功");
    } else {
      ElMessage.success("删除提交完成");
    }
    fetchList();
  } catch (e) {
    // 用户取消或请求失败
  }
};

const formatDate = (value?: string) => {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return `${date.getFullYear()}-${(date.getMonth() + 1)
    .toString()
    .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
    .getHours()
    .toString()
    .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
};

// 加载用户列表（领用人）
const loadBorrowerOptions = async () => {
  try {
    const res = await https.Reads.get("/RBAC/ShowUser", {
      params: { pageindex: 1, pagesize: 1000 },
    });
    const data = res.data?.data ?? [];
    borrowerOptions.value = data.map((x: any) => ({
      label: x.username,
      value: x.id,
    }));
  } catch (e) {
    borrowerOptions.value = [];
  }
};

// 表格样式
const headerCellStyle = {
  background: "linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)",
  color: "#303133",
  fontWeight: "600",
  fontSize: "14px",
  borderColor: "#e4e7ed",
};

const rowStyle = ({ rowIndex }: { rowIndex: number }) => {
  return {
    transition: "all 0.3s ease",
  };
};

onMounted(() => {
  fetchList();
  // 加载用户选项
  loadBorrowerOptions();
});
</script>

<style scoped>
.tool-borrow-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 页面头部样式 */
.breadcrumb-card {
  border-radius: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
  transition: all 0.3s ease;
}

.breadcrumb-card:hover {
  box-shadow: 0 6px 30px rgba(102, 126, 234, 0.25);
  transform: translateY(-2px);
}

.breadcrumb-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.breadcrumb-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.breadcrumb-icon {
  font-size: 32px;
  color: #ffffff;
}

.title-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.breadcrumb-subtitle {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.breadcrumb-heading {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.breadcrumb-nav {
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(50, 50, 93, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);

  :deep(.el-breadcrumb__item) {
    position: relative;

    .el-breadcrumb__inner {
      color: #ffffff;
      font-weight: 500;
      transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      letter-spacing: 0.5px;
      text-transform: none;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    }

    &:not(:last-child) .el-breadcrumb__inner {
      opacity: 0.92;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    }

    &:last-child .el-breadcrumb__inner {
      color: #ffffff;
      font-weight: 600;
      padding: 4px 16px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.22);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
      text-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    }

    .el-breadcrumb__inner.is-link,
    .el-breadcrumb__inner a {
      color: #ffffff !important;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    :deep(a .el-breadcrumb__inner),
    :deep(.el-breadcrumb__inner a) {
      color: inherit;
    }

    .el-breadcrumb__inner a {
      padding: inherit;
      border-radius: inherit;
    }
  }

  :deep(.el-breadcrumb__separator) {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    margin: 0 4px;
  }
}

/* 搜索区域样式 */
.search-card {
  border-radius: 16px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.search-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.search-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-icon {
  font-size: 18px;
  color: #409eff;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.form-item-custom {
  margin-bottom: 0;
}

.form-item-custom :deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
  font-size: 14px;
}

.search-input,
.search-select,
.search-date {
  width: 240px;
}

.input-icon {
  color: #909399;
}

.search-actions {
  margin-left: auto;
  display: flex;
  gap: 12px;
}

.reset-btn {
  border-color: #dcdfe6;
  color: #606266;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  border-color: #409eff;
  color: #409eff;
  background: #ecf5ff;
}

.search-btn {
  padding: 10px 24px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.search-btn:hover {
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

/* 表格区域样式 */
.table-card {
  border-radius: 16px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.table-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.title-text {
  font-size: 18px;
  font-weight: 700;
  color: #303133;
  letter-spacing: 0.5px;
}

.list-tag {
  border-radius: 6px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.count-tag {
  border-radius: 6px;
  padding: 4px 12px;
  font-weight: 500;
}

.table-operations {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 10px 20px;
  font-weight: 500;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.create-btn {
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.create-btn:hover {
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

.delete-btn {
  position: relative;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.delete-btn:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
  transform: translateY(-1px);
}

.badge-custom {
  margin-left: 4px;
}

.data-table {
  border-radius: 8px;
  overflow: hidden;
}

.data-table :deep(.el-table__header-wrapper) {
  border-radius: 8px 8px 0 0;
}

.data-table :deep(.el-table__body-wrapper) {
  border-radius: 0 0 8px 8px;
}

.data-table :deep(.el-table__row) {
  transition: all 0.3s ease;
}

.data-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.data-table :deep(.el-table__row--striped) {
  background-color: #fafafa;
}

.data-table :deep(.el-table__row--striped:hover) {
  background-color: #f0f2f5;
}

.index-text {
  color: #909399;
  font-weight: 500;
}

.link-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.link-text:hover {
  color: #66b1ff;
  transform: translateX(2px);
}

.link-icon {
  font-size: 16px;
}

.time-text {
  color: #606266;
  font-size: 13px;
}

.action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.action-link-btn {
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.edit-btn:hover {
  background-color: #ecf5ff;
  color: #409eff;
}

.delete-link-btn:hover {
  background-color: #fef0f0;
  color: #f56c6c;
}

/* 分页区域样式 */
.table-pagination {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.pagination-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pagination-total {
  color: #606266;
  font-size: 14px;
}

.pagination-total strong {
  color: #409eff;
  font-weight: 600;
  font-size: 16px;
}

.pagination-detail {
  color: #909399;
  font-size: 13px;
}

.pagination-component {
  flex: 1;
  justify-content: center;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pagination-size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.size-label {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}

.size-select {
  width: 100px;
}

.pagination-jumper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jumper-label {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}

.jumper-input {
  width: 70px;
}

.jumper-btn {
  padding: 6px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.jumper-btn:hover {
  background-color: #409eff;
  color: #ffffff;
  border-color: #409eff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-input,
  .search-select,
  .search-date {
    width: 200px;
  }

  .pagination-content {
    flex-direction: column;
    align-items: stretch;
  }

  .pagination-component {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .tool-borrow-page {
    padding: 12px;
    gap: 12px;
  }

  .breadcrumb-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input,
  .search-select,
  .search-date {
    width: 100%;
  }

  .search-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .table-operations {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>
